<template>
  <div class="interviews">
    <!-- 顶部栏 -->
    <van-nav-bar
      title="面试题"
      left-text="返回"
      right-text="答题卡"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 题目 -->
    <div class="dati">
      <div class="title">
        <p>{{ isSingle }}{{ questions[currentIndex].detail.title }}</p>
        <span
          v-for="(item, index) in questions[currentIndex].detail.tag"
          :key="index"
          >{{ item }}</span
        >
      </div>
      <!-- 选项 -->
      <div class="items">
        <div
          class="item"
          v-for="(option, index) in questions[currentIndex].detail.option"
          :key="index"
          @click="chooseOption(ABCD[index], index)"
          :class="{
            active:
              smType == 1
                ? ABCD[index] == single
                : multiple.indexOf(ABCD[index]) != -1,
            isError:
              smType == 1
                ? ABCD[index] == singleError
                : multipleError.indexOf(ABCD[index]) != -1,
            right:
              smType == 1
                ? ABCD[index] == singleAnswer
                : multipleAnswer.indexOf(ABCD[index]) != -1
          }"
        >
          {{ ABCD[index] }}. {{ option }}
        </div>
      </div>
      <!-- 底部栏 -->
      <div class="footer">
        <div class="one">
          <i><van-icon name="star-o" color="#1989fa"/></i><span>收藏</span>
        </div>
        <div class="one">
          <i><van-icon name="edit" color="#1989fa"/></i><span>反馈</span>
        </div>
        <div class="tow">
          <i>{{ xuhao }}</i
          ><span>/{{ total }}</span
          >题
        </div>
        <div>
          <van-button v-if="flag" type="info" @click="submit">提交</van-button>
          <van-button v-else type="primary" @click="nextQuestion"
            >下一题</van-button
          >
        </div>
      </div>
    </div>
    <!-- 答案解析 -->
    <div class="result" :class="{ resultShow: show }">
      <h3>答案解析</h3>
      <div class="right">
        <span class="one">正确答案 : </span>
        <span class="one">{{ resultAnswer }}</span>
      </div>
      <div class="dif">
        <span>难度: {{ difficulty }}</span>
        <span>提交次数: {{ results.submitNum }}</span>
        <span>正确次数: {{ results.correctNum }}</span>
      </div>
      <div class="analysis">
        <p>{{ results.answerAnalysis }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  interviewQuestionsApi,
  submitQusApi,
  interviewsApi
} from '@/api/exercise.js'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      typeId: '', // 职业类型id
      cName: '',
      questions: [], // 面试题集合
      ABCD: ['A', 'B', 'C', 'D'],
      total: 0, // 题目数量
      currentIndex: 0, // 当前的题目
      smType: 1, // 是否是多选还是单选1&2
      idx: 0, // 选项的下标
      results: {}, // 提交选项结果
      show: false,
      single: '', // 单选题
      multiple: [], // 多选题
      singleError: '', // 单选错误选项的样式显示
      multipleError: '', // 多选错误选项的样式显示
      singleAnswer: '', // 单选时的答案
      multipleAnswer: '', // 双选时的答案
      flag: true, // 当前显示的是提交按钮
      xuhao: 1 // 当前题目序号
    }
  },
  methods: {
    async interviewQuestions () {
      const res = await interviewQuestionsApi({
        type: this.typeId,
        city: this.cName
      })
      console.log(res)
      this.questions = res.data.data
      // console.log(this.questions[0].detail)
      // 保存总数
      this.total = this.questions.length
      // console.log(this.total)
      // 判断是单选还是多选
      this.smType = this.questions[this.currentIndex].detail.type
      // console.log(this.smType);
      // console.log(this.questions[0].id)
    },
    // 退出答题
    onClickLeft () {
      Dialog.confirm({
        title: '提示',
        message: '是否退出答题'
      })
        .then(() => {
          // on confirm
          this.$router.go(-1)
        })
        .catch(() => {
          // on cancel
          // return
        })
    },
    // 进入答题卡页面
    onClickRight () {
      Toast('按钮')
    },
    // 选择试题
    chooseOption (value, index) {
      // this.actShow[value] = true
      // 绑定点击选项的下标
      this.idx = index
      // console.log(value)
      if (this.smType == 1) {
        this.single = value
      } else {
        this.multiple.push(value)
      }
    },
    // 提交
    async submit () {
      const sm = this.smType == 1 ? this.single : this.multiple
      const res = await submitQusApi({
        id: this.questions[0].id,
        singleAnswer: sm
      })
      // console.log(res)
      this.results = res.data.data
      if (this.smType == 1) {
        this.singleAnswer = this.results.singleAnswer
      } else {
        this.multipleAnswer = this.results.multipleAnswer
      }
      // console.log(this.results)
      this.show = true
      // 提交答案时才对选中的选项进行样式更改
      if (this.smType == 1) {
        this.singleError = this.single
      } else {
        this.multipleError = this.multiple
      }
      // 切换为下一题按钮
      this.flag = false
      // console.log(this.results.difficulty);
    },
    // 点击下一题
    async nextQuestion () {
      this.xuhao = this.xuhao + 1
      this.show = false
      const index = this.currentIndex + 1
      const nextId = this.questions[index].id
      console.log(nextId)
      // console.log(aa);
      const res = await interviewsApi({
        id: nextId,
        potision: this.typeId,
        difficulty: this.questions[this.currentIndex].detail.difficulty
      })
      // console.log(res)
      this.questions = res.data.data
      // console.log(this.questions)
      // 保存总数
      this.total = this.questions.length
      // console.log(this.total)
      // 判断是单选还是多选
      this.smType = this.questions[this.currentIndex].detail.type
      // 重置数据
      this.single = '' // 单选题
      this.multiple = [] // 多选题
      this.idx = 0 // 选项的下标
      this.results = {} // 提交选项结果
      this.show = false
      this.singleError = '' // 单选错误选项的样式显示
      this.multipleError = '' // 多选错误选项的样式显示
      this.singleAnswer = '' // 单选时的答案
      this.multipleAnswer = '' // 双选时的答案
      this.currentIndex = 0

      // 显示提交按钮
      this.flag = true
    }
  },
  created () {
    // 赋值
    this.typeId = this.$route.params.id
    this.cName = this.$route.params.cityName
    this.interviewQuestions()
    // console.log(this.smType)
  },
  updated () {
    // console.log('改变了');
  },
  computed: {
    // 是否单选&多选
    isSingle () {
      return this.smType == 1 ? '【单选】' : '【多选】'
    },
    // 根据单选&多选添加选中样式
    // isActive() {
    //   if (this.smType == 1) {
    //     return this.ABCD[this.idx] == this.single
    //   }else{
    //     return this.multiple.indexOf(this.ABCD[this.idx]) != -1
    //   }
    // }
    // 单选&多选时的答案
    resultAnswer () {
      if (this.smType == 1) {
        return this.singleAnswer
      } else {
        return this.multipleAnswer
      }
    },
    // 难度转换
    difficulty () {
      let dif = ''
       switch (this.results.difficulty) {
        case '0':
          dif ='全部'
          break;
        case '1':
          dif ='简单'
          break
        case '2':
          dif ='中等'
          break
        case '3':
         dif = '困难'
          break
        default:
          break
      }
      return dif
    }
  }
}
</script>

<style lang="less">
.interviews {
  position: relative;
  margin-bottom: 0px;
  background-color: #FFF;
  .dati {
    margin-top: 2px;
    // margin-bottom: 10px;
    padding: 0px 12px 10px 12px;
    background-color: #fff;
    .title {
      // background-color: aquamarine;
      p {
        font-size: 18px;
        word-wrap: break-word;
        word-break: normal;
      }
      span {
        font-size: 14px;
        padding: 4px 6px;
        margin-right: 15px;
        border-radius: 4px;
        color: #bbb;
        background-color: #f7f4f5;
      }
    }
    .items {
      .item {
        margin-top: 20px;
        padding: 10px 10px;
        // background-color: yellowgreen;
        border: 1px solid #eee;
        font-size: 16px;
      }
      .active {
        border: 1px solid skyblue;
      }
      .isError {
        background-color: #ffefea;
        position: relative;
        color: red;
      }
      .right {
        background-color: #ddfad9;
        position: relative;
        color: green;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    .one {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px 10px;
      font-size: 14px;
      i {
        font-size: 20px;
      }
    }
    .tow {
      // margin-left: 20px;
      font-size: 14px;
      i {
        font-size: 18px;
        color: red;
        font-style: normal;
      }
    }
  }
  .result {
    display: none;
    padding: 0 12px 50px 12px;
    font-size: 16px;
    background-color: #FFF;
    .right {
      color: aqua;
    }
    .dif {
      margin: 15px 0;
      padding: 5px 10px;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #eee;
      border-radius: 4px;
    }
    .analysis {
      font-size: 14px;
    }
  }
  .resultShow {
    display: block;
  }
}
</style>
